<template>
  <el-menu
    :index="0"
    style="border-right: none; margin-top: 10px"
    class="el-menu-vertical-demo"
    router
    :default-active="router.options.history.location"
  >
    <template v-for="item in menuList">
      <el-sub-menu
        v-if="item.subMenu != null"
        :index="item.menuId + ''"
        :key="item.menuId"
      >
        <template #title>
          <el-icon>
            <component :is="item.menuIcon" />
          </el-icon>
          {{ item.menuTitle }}
        </template>
        <el-menu-item
          v-for="child in item.subMenu"
          :index="child.menuHref + ''"
          :key="child.menuId"
        >
          <el-icon>
            <component :is="child.menuIcon" />
          </el-icon>
          {{ child.menuTitle }}</el-menu-item
        >
      </el-sub-menu>
      <el-menu-item
        v-else
        :index="item.menuId + ''"
        :key="'else-' + item.menuId"
        ><el-icon>
          <component :is="item.menuIcon" />
        </el-icon>
        {{ item.menuTitle }}
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script setup>
import allUserApi from "@/api/Backend/AllUserApi";
import { userInfo } from "@/stores/userinfo";
import router from "@/router";

const menuList = ref([]);

onMounted(() => {
  if (userInfo != null) {
    allUserApi.getMenu({ userId: "1" }).then((res) => {
      if (res.code == 200) {
        //表示登录成功
        menuList.value = res.data; //获取菜单数据
      } else {
        console.log("菜单加载失败，请尝试刷新页面！");
      }
    });
  }
});
// if (userinfo != null) {
//   //获取登录用户编号
//   axios
//     .post("/menu/get", { userId: userinfo.userId })
//     .then((response) => {
//       if (response.data.code == 200) {
//         //表示登录成功
//         menuList.value = response.data.data; //获取菜单数据
//       } else {
//         console.log("菜单加载失败，请尝试刷新页面！");
//       }
//     })
//     .catch((err) => {
//       console.log(err);
//     });
// }

const goLogin = () => {
  router.push("/login");
};
</script>
